<template>
  <div>
    <a-row>
      <a-col :span="2">
      </a-col>
      <a-col :span="14">
        <div align="center" style="width: 100%">
          <a-descriptions align="center" bordered>
            <a-descriptions-item label="项目名称" :span="1">区块链货币</a-descriptions-item>
            <a-descriptions-item label="类型">挖矿</a-descriptions-item>
            <a-descriptions-item label="信誉成度">一般</a-descriptions-item>
            <a-descriptions-item label="项目时间">2018-04至2019-09</a-descriptions-item>
            <a-descriptions-item label="报名截至时间">2018-04-24</a-descriptions-item>

            <a-descriptions-item label="预期收益">$80000</a-descriptions-item>
            <a-descriptions-item label="获得融资">$2000</a-descriptions-item>
            <a-descriptions-item label="信誉要求">80分以上</a-descriptions-item>
            <a-descriptions-item label="组队状态">
              <a-badge status="processing" text="14/24" />
            </a-descriptions-item>
            <a-descriptions-item label="项目简介">
              Data disk type: MongoDB
              <br />Database version: 3.4
              <br />Package: dds.mongo.mid
              <br />Storage space: 10 GB
              <br />Replication factor: 3
              <br />Region: East China 1
              <br />
            </a-descriptions-item>
          </a-descriptions>
          
          <router-link :to="{name: 'news'}" tag="li">
            <a-button type="dashed">行业周报</a-button>
          </router-link>

          <a-button type="dashed">加入我们</a-button>

        </div>
      </a-col>
      <a-col :span="6">
        <a-image
          :width="500"
          :height="200"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jinse.com%2F1084134_image30.png&refer=http%3A%2F%2Fimg.jinse.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640095819&t=51cd59847fdcc978e4bcaf95ab13d7be"
        />
      </a-col>
       <a-col :span="2">
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="18">
        <div align="center">
          <a-col v-for="item in page" :key="item.picId" :span="15">
            <a-comment style="width: 100%">
              <template #actions>
                <span key="item.picId">
                  <a-tooltip title="item.title">
                    <template v-if="action === 'liked'">
                      <LikeFilled @click="like" />
                    </template>
                    <template v-else>
                      <LikeOutlined @click="like" />
                    </template>
                  </a-tooltip>
                  <span style="padding-left: 8px; cursor: auto">{{ likes }}</span>
                </span>
                <span key="comment-basic-dislike">
                  <a-tooltip title="Dislike">
                    <template v-if="action === 'disliked'">
                      <DislikeFilled @click="dislike" />
                    </template>
                    <template v-else>
                      <DislikeOutlined @click="dislike" />
                    </template>
                  </a-tooltip>
                  <span style="padding-left: 8px; cursor: auto">{{ dislikes }}</span>
                </span>
                <span key="comment-basic-reply-to">Reply to</span>
              </template>
              <template #author>
                <a>{{item.title}}</a>
              </template>
              <template #avatar>
                <a-avatar
                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  alt="Han Solo"
                />
              </template>
              <template #content>{{item.describe}}</template>
              <template #datetime>
                <a-tooltip :title="moment().format('YYYY-MM-DD HH:mm:ss')">
                  <span>{{ moment().fromNow() }}</span>
                </a-tooltip>
              </template>
            </a-comment>
          </a-col>
        </div>
      </a-col>
      <a-col :span="5">
        <div v-for="item in pageg" :key="item.picId">
          <a-card style="width: 240px">
            <template #cover>
              <img :alt="example" :src="item.url" />
            </template>
            <a-card-meta :title="item.title">
              <template #description>{{ item.describe }}</template>
            </a-card-meta>
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import moment from "moment";
import {
  LikeFilled,
  LikeOutlined,
  DislikeFilled,
  DislikeOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
const data = [
  {
    title: "Ant Design Title 1",
  },
  {
    title: "Ant Design Title 2",
  },
  {
    title: "Ant Design Title 3",
  },
  {
    title: "Ant Design Title 4",
  },
];

export default defineComponent({
  components: {
    LikeFilled,
    LikeOutlined,
    DislikeFilled,
    DislikeOutlined,
  },
  setup() {
    const visible = ref(false);
    const likes = ref(0);
    const dislikes = ref(0);
    const action = ref();

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = (e) => {
      console.log(e);
      visible.value = false;
    };
    const like = () => {
      likes.value = 1;
      dislikes.value = 0;
      action.value = "liked";
    };

    const dislike = () => {
      likes.value = 0;
      dislikes.value = 1;
      action.value = "disliked";
    };

    return {
      pageg: ref([
        {
          picId: 1,
          title: "一刀999",
          describe: "推荐项目或广告",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 2,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 3,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 4,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 5,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 6,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 7,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 8,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 9,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
      ]),
      page: ref([
        {
          picId: 1,
          title: "Aaron",
          describe:
            "在公共区块链中，用户可以成为区块链网络的成员。这意味着他们可以在设备上下载所需的软件后存储，发送和接收数据，允许任何人读取和写入存储在区块链中的数据，因为世界上每个人都可以访问。",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 2,
          title: "Anthony",
          describe:
            "在私有区块链中，写入、发送和接收数据的权限由一个组织控制。私有区块链通常在组织内使用，只允许少数特定用户访问并执行交易。控制组织有权更改私有区块链的规则，也可能根据既定的规则和规定拒绝交易。",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 3,
          title: "Adelaide",
          describe:
            "财团区块链（也称为许可区块链）可以被视为公共区块链提供的低信任与私有区块链的单个高度可信实体模型之间的混合模型。不是允许任何用户参与交易过程的验证，或者只是允许一个公司完全控制，而是在联盟区块链中预先确定几个选定方。它只允许有限数量的用户参与共识过程。",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 4,
          title: "Adelaide",
          describe:
            "区块链这一术语最常用于描述分类帐技术，而不是特定产品或解决方案。区块链解决方案将具有相同的共同点，例如通过密码学分发和支持并具有某种形式的共识机制。，有各种区块链来自公共、许可或私人版本。今天，有许多不同的协议，被视为区块链，可以归类为分布式分类帐技术。例如，Ethereum，来自R3的Corda，来自IBM的Fabric和Ripple。",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 5,
          title: "Amanda",
          describe:
            "智能合约是法律文件智能合约一词具有误导性。它们既不“聪明”，也不是通常被视为法律文件的“合同”。智能合约于1994年由密码学研究员Nick Szabo首次作为术语引入，基本上是由开发人员编写并部署到区块链上的脚本或软件代码",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 6,
          title: "Alina",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 7,
          title: "Ailsa",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 8,
          title: "Ailsa",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 9,
          title: "Ailsa",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 10,
          title: "Ailsa",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 11,
          title: "Ailsa",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
      ]),
      visible,
      showModal,
      handleOk,
      data,
      likes,
      dislikes,
      action,
      like,
      dislike,
      moment,
    };
  },
});
</script>
<style  scoped>
#components-layout-demo-basic .code-box-demo {
  text-align: center;
}
</style>

